<template>
  <a-card :bordered="false" style="padding-top: 24px;width: 100%;border-radius: 4px">
    <a-form layout="inline">
      <div class="search">
        <div class="searchForm">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="商品ID">
                <a-input placeholder="请输入商品ID" v-model="queryForm.prdNo" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="商品名称">
                <a-input placeholder="请输入商品名称" v-model="queryForm.prdName" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`开售时间`">
                <a-range-picker
                  v-model="queryForm.saleTimeArray"
                  :style="{width:'200px'}"
                  :placeholder="['开始时间', '结束时间']"/>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="searchBtn">
          <a-button :style="{marginTop:'10px'}" type="primary" @click="handleSearch">
            查询
          </a-button>
          <br/>
          <a-button :style="{marginTop:'10px'}" @click="handleReset">
            重置
          </a-button>
        </div>
        <div class="tableTool">
          <a-button type="primary" @click="addPrdModalVisible = !addPrdModalVisible">
            添加商品
          </a-button>
        </div>
      </div>
    </a-form>

    <a-table
      :rowKey="`eventNo`"
      :columns="columns"
      :data-source="data"
      :style="{marginTop:'15px',float:'left',width:'100%'}"
      :pagination="{ pageSize: 10 }">
      <template slot="prdInfo" slot-scope="text, record">
        <div style="width: 200px">
          <div style="width: 50px;float: left">
            <img :src="url + `/file/` + record.prdInfo.prdImgCover " style="width:50px">
          </div>
          <div style="width: 150px;float: right;padding-left: 20px">
            <h3>{{ record.prdInfo.prdName }}</h3>
            <h5>{{ record.prdInfo.prdSubName }}</h5>
          </div>
        </div>
      </template>
      <template slot="status" slot-scope="text, record">
        <span v-if="record.prdInfo.prdStatus == '1'">
          售卖中
        </span>
        <span v-if="record.prdInfo.prdStatus == '2'">
          已下架
        </span>
        <span v-if="record.prdInfo.prdStatus == '3'">
          禁封中
        </span>
      </template>
      <template slot="action" slot-scope="text,record">
        <a @click="handleDeletePrd(record.id)">删除</a>
      </template>

      <!--      <template slot="status" slot-scope="text,record">-->
      <!--        <span v-if="record.status == '01'">未开始</span>-->
      <!--        <span v-if="record.status == '02'">进行中</span>-->
      <!--        <span v-if="record.status == '03'">已结束</span>-->
      <!--        <span v-if="record.status == '04'">暂停</span>-->
      <!--      </template>-->
      <!--      <template slot="eventTime" slot-scope="text,record">-->
      <!--        <span>-->
      <!--          {{ record.eventStartTime }} 至 {{ record.eventEndTime }}-->
      <!--        </span>-->
      <!--      </template>-->
      <!--      <template slot="action" slot-scope="text,record,index">-->
      <!--        <a v-if="record.status == '01' || record.status == '02'" @click="handleUpdateEvent(record,index)">暂停</a>-->
      <!--      </template>-->
    </a-table>

    <a-modal
      title="添加商品"
      :visible="addPrdModalVisible"
      :width="1000"
      :closable="false"
      @cancel="addPrdModalVisible = !addPrdModalVisible"
      @ok="handleAddPrd">
      <a-row>
        <a-col span="24">
          <div style="width: 100px;float: left">
            开售时间：
          </div>
          <a-date-picker
            show-time
            placeholder="请选择开售时间"
            v-model="addForm.saleTime"
            :style="{width:'150px',borderRadius:'4px'}"/>
        </a-col>
      </a-row>
      <a-row :style="{marginTop:'16px'}">
        <a-col span="8">
          <div style="width: 100px;float: left">
            商品ID：
          </div>
          <a-input v-model="addForm.prdNo" :style="{width:'150px',borderRadius:'4px'}" placeholder="请输入商品ID"/>
        </a-col>
        <a-col span="8">
          <div style="width: 100px;float: left">
            商品名称：
          </div>
          <a-input v-model="addForm.prdName" :style="{width:'150px',borderRadius:'4px'}" placeholder="请输入商品名称"/>
        </a-col>
        <a-col span="8">
          <a-button type="primary" @click="handleModalSearch">
            查询
          </a-button>
          <a-button :style="{marginLeft:'24px'}" @click="handleModalReset">
            重置
          </a-button>
        </a-col>
      </a-row>
      <a-table
        :columns="modalTableColumns"
        :data-source="modalTableData"
        :style="{marginTop:'15px',width:'100%'}"
        :row-selection="{ type:'radio',selectedRowKeys: selectedPrdNos, onChange: onSelectChange }">
        <template slot="prdInfo" slot-scope="text, record">
          <div style="width: 200px">
            <div style="width: 50px;float: left">
              <img :src="url + `/file/` + record.prdImgCover " style="width:50px">
            </div>
            <div style="width: 150px;float: right;padding-left: 20px">
              <h3>{{ record.prdName }}</h3>
              <h5>{{ record.prdSubName }}</h5>
            </div>
          </div>
        </template>
        <template slot="prdStatus" slot-scope="text, record">
          <span v-if="record.prdStatus == '1'">
            售卖中
          </span>
          <span v-if="record.prdStatus == '2'">
            已下架
          </span>
          <span v-if="record.prdStatus == '3'">
            禁封中
          </span>
        </template>
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
  import { queryPrd } from '@/api/prd'
  import { addTimingSale, queryTimingSale, delTimingSale } from '@/api/timingSale'

  const columns = [
    {
      title: '商品信息',
      key: 'prdInfo',
      scopedSlots: { customRender: 'prdInfo' }
    },
    {
      title: '上架状态',
      key: 'status',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '开售时间',
      key: 'saleTime',
      dataIndex: 'saleTime'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  const modalTableColumns = [
    {
      title: '商品信息',
      key: 'prdInfo',
      scopedSlots: { customRender: 'prdInfo' }
    },
    {
      title: '上架状态',
      key: 'prdStatus',
      scopedSlots: { customRender: 'prdStatus' }
    }
  ]
  export default {
    name: 'TimingSales',
    data () {
      return {
        url: process.env.VUE_APP_API_BASE_URL,
        columns,
        total: 0,
        pageNumb: 1,
        pageSize: 10,
        data: [],
        queryForm: {
          prdNo: '',
          prdName: '',
          saleTimeArray: [],
          saleStartTime: '',
          saleEndTime: ''
        },

        modalTableColumns,
        modalTableData: [],
        addForm: {
          saleTime: undefined,
          prdNo: '',
          prdName: ''
        },
        addPrdModalVisible: false,

        selectedPrdNos: []
      }
    },
    methods: {
      handleSearch () {
        if (this.queryForm.saleTimeArray && this.queryForm.saleTimeArray.length > 0) {
          this.queryForm.saleStartTime = this.queryForm.saleTimeArray[0].format('YYYY-MM-DD HH:mm:ss')
          this.queryForm.saleEndTime = this.queryForm.saleTimeArray[1].format('YYYY-MM-DD HH:mm:ss')
        }
        queryTimingSale(this.queryForm).then(rsp => {
          this.total = rsp.total
          this.pageNumb = rsp.pageNumb
          this.pageSize = rsp.pageSize
          this.data = rsp.data
        })
      },
      handleReset () {
        this.queryForm = {}
      },
      handleModalSearch () {
        queryPrd({ prdNo: this.addForm.prdNo, prdName: this.addForm.prdName }).then(rsp => {
          this.modalTableData = rsp.data
        })
      },
      handleModalReset () {
        this.addForm.prdNo = ''
        this.addForm.prdName = ''
      },
      onSelectChange (selectRowKeys, selectRows) {
        this.selectedPrdNos = selectRowKeys
      },
      handleAddPrd () {
        addTimingSale({
          saleTime: this.addForm.saleTime.format('YYYY-MM-DD HH:mm:ss'),
          prdNo: this.modalTableData[this.selectedPrdNos[0]].prdNo
        }).then(rsp => {
          this.addForm = {}
          this.addPrdModalVisible = !this.addPrdModalVisible
          this.selectedPrdNos = []
          this.modalTableData = []
          this.handleSearch()
        })
      },
      handleDeletePrd (id) {
        delTimingSale({ id }).then(rsp => {
          this.handleSearch()
        })
      }
    },
    mounted () {
      this.handleSearch()
    }
  }
</script>

<style scoped>
  .search {
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
    height: 90px;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    height: 90px;
    padding-left: 20px;
  }

  .tableTool {
    float: right;
    padding-top: 15px;
  }

  .ant-form-item-label {
    width: 100px !important;
  }
</style>
